﻿<%@ Page Title="" Language="C#" MasterPageFile="~/UI/Administrator/Dashboard.Master"
    AutoEventWireup="true" CodeBehind="AccountAdd.aspx.cs" Inherits="OnlineRailway.UI.Administrator.AccountAdd" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" type="text/css" href="../../Style/MainContent.css" />
    <script src="../../Javascript/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {



            $('#txtFullname').blur(function () {
                if (($('#txtFullname').val().length == 0)) {
                    $('#error-fullname').html('Please enter your full name.');
                    $('#txtFullname').addClass('input-error');
                    return false;
                } else {
                    $('#error-fullname').html('');
                    $('#txtFullname').removeClass('input-error');
                    return true;
                }
            });
            $('#txtFullname').focus(function () {
                $('#error-fullname').html('');
                $('#txtFullname').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $('#txtUsername').blur(function () {
                if (($('#txtUsername').val().length == 0)) {
                    $('#error-username').html("Please enter your user name.");
                    $('#txtUsername').addClass('input-error');
                } else {
                    $('#error-username').html("");
                    $('#txtUsername').removeClass('input-error');
                    $.ajax({
                        type: "POST",
                        url: "AccountAdd.aspx/CheckExistUser",
                        data: "{'name': '" + $('#txtUsername').val() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (message) {
                            if (message.d == "OK") {
                                $('#error-username').html("");
                            } else {
                                $('#error-username').html("Username has been existed. Please choose other name.");
                            }

                        },
                        error: nameFailed
                    });
                }
            });

            function nameFailed(result) {
                alert(result.status + ' ' + result.statusText);
            }

            $('#txtUsername').focus(function () {
                $('#error-username').html("");
                $('#txtUsername').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $('#txtPassword').blur(function () {
                if ($('#txtPassword').val().length == 0) {
                    $('#error-password').html("Please enter password.");
                    $('#txtPassword').addClass('input-error');
                } else {
                    $('#error-password').html("");
                    $('#txtPassword').removeClass('input-error');
                }
            });
            $('#txtPassword').focus(function () {
                $('#error-password').html("");
                $('#txtPassword').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/

            $('#txtAddress').blur(function () {
                if (($('#txtAddress').val().length == 0)) {
                    $('#error-address').html("Please enter address.");
                    $('#txtAddress').addClass('input-error');
                } else {
                    $('#error-address').html("");
                    $('#txtAddress').removeClass('input-error');
                }
            });
            $('#txtAddress').focus(function () {
                $('#error-address').html("");
                $('#txtAddress').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $('#txtQualification').blur(function () {
                if (($('#txtQualification').val().length == 0)) {
                    $('#error-qualification').html("Please enter qualification.");
                    $('#txtQualification').addClass('input-error');
                } else {
                    $('#error-qualification').html("");
                    $('#txtQualification').removeClass('input-error');
                }
            });
            $('#txtQualification').focus(function () {
                $('#error-qualification').html("");
                $('#txtQualification').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $("#txtDay").keydown(function (e) {
                if (e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9) {
                    return true;
                } else if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105) && (e.keyCode < 37 || e.keyCode > 40)) {
                    return false;
                } else {
                    return true;
                }

            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $("#txtYear").keydown(function (e) {
                if (e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9) {
                    return true;
                } else if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105) && (e.keyCode < 37 || e.keyCode > 40)) {
                    return false;
                } else {
                    return true;
                }

            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $('#txtDay').blur(function () {
                if (($('#txtDay').val().length == 0)) {
                    $('#txtDay').addClass('input-error');
                } else {
                    $('#txtDay').removeClass('input-error');
                }
            });
            $('#txtDay').focus(function () {
                $('#txtDay').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $('#txtYear').blur(function () {
                if (($('#txtYear').val().length == 0)) {
                    $('#txtYear').addClass('input-error');
                } else {
                    $('#txtYear').removeClass('input-error');
                }
            });
            $('#txtYear').focus(function () {
                $('#txtYear').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $('#txtEmail').blur(function () {
                if ($('#txtEmail').val() != "") {
                    var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                    if (!emailReg.test($('#txtEmail').val())) {
                        $('#error-email').html('Email invalid');
                        $('#txtEmail').addClass('input-error');
                    } else {
                        $('#error-email').html('');
                        $('#txtEmail').removeClass('input-error');
                    }
                }
            });
            $('#txtEmail').focus(function () {
                $('#error-email').html('');
                $('#txtEmail').removeClass('input-error');
            });
            /***********************************/
            /***                             ***/
            /***********************************/
            $('#txtConfirm').blur(function () {
                if ($('#txtConfirm').val()=="") {
                    $('#error-confirm').html('Please enter confirm password.');
                    $('#txtConfirm').addClass('input-error');
                } else if ($('#txtPassword').val() != $('#txtConfirm').val()) {
                    $('#error-confirm').html('Password is not match');
                    $('#txtConfirm').addClass('input-error');
                } else {
                    $('#error-confirm').html('');
                    $('#txtConfirm').removeClass('input-error');
                }

            });

            $('#txtConfirm').focus(function () {
                $('#error-confirm').html("");
                $('#txtConfirm').removeClass('input-error');
            });
            /***********************************/
            /**    Confirm before leave page  **/
            /***********************************/
            /*var isEdit = false;
            $('input').change(function () {
            isEdit = true;
            });
            $('select').change(function () {
            isEdit = true;
            });

            function checkIsEdit() {
            if (isEdit) {
            return "You have modify some content.";
            }
            };
            window.onbeforeunload = checkIsEdit;*/
        });
        function checkAll() {
            var flag = true;
            if (($('#txtFullname').val().length == 0)) {
                $('#error-fullname').html('Please enter your full name.');
                $('#txtFullname').addClass('input-error');
                flag=false;
            } else {
                $('#error-fullname').html('');
                $('#txtFullname').removeClass('input-error');
            }
            if (($('#txtUsername').val().length == 0)) {
                $('#error-username').html("Please enter your user name.");
                $('#txtUsername').addClass('input-error');
                flag = false;
            } else {
                $('#error-username').html("");
                $('#txtUsername').removeClass('input-error');
                $.ajax({
                    type: "POST",
                    url: "AccountAdd.aspx/CheckExistUser",
                    data: "{'name': '" + $('#txtUsername').val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (message) {
                        if (message.d == "OK") {
                            $('#error-username').html("");
                        } else {
                            $('#error-username').html("Username has been existed. Please choose other name.");
                            flag = false;
                        }
                    }
                });
            }
            if ($('#txtPassword').val().length == 0) {
                $('#error-password').html("Please enter password.");
                $('#txtPassword').addClass('input-error');
                flag = false;
            } else {
                $('#error-password').html("");
                $('#txtPassword').removeClass('input-error');
            }
            if ($('#txtConfirm').val().length == 0) {
                $('#error-confirm').html("Please enter confirm password.");
                $('#txtConfirm').addClass('input-error');
                flag = false;
            } else {
                $('#error-confirm').html("");
                $('#txtConfirm').removeClass('input-error');
            }
            if (($('#txtAddress').val().length == 0)) {
                $('#error-address').html("Please enter address.");
                $('#txtAddress').addClass('input-error');
                flag = false;
            } else {
                $('#error-address').html("");
                $('#txtAddress').removeClass('input-error');
            }
            if (($('#txtQualification').val().length == 0)) {
                $('#error-qualification').html("Please enter qualification.");
                $('#txtQualification').addClass('input-error');
                flag = false;
            } else {
                $('#error-qualification').html("");
                $('#txtQualification').removeClass('input-error');
            }
            if (($('#txtDay').val().length == 0)) {
                $('#txtDay').addClass('input-error');
                flag = false;
            } else {
                $('#txtDay').removeClass('input-error');
            }
            if (($('#txtYear').val().length == 0)) {
                $('#txtYear').addClass('input-error');
                flag = false;
            } else {
                $('#txtYear').removeClass('input-error');
            }
            if ($('#txtEmail').val() != "") {
                var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                if (!emailReg.test($('#txtEmail').val())) {
                    $('#error-email').html('Email invalid');
                    $('#txtEmail').addClass('input-error');
                    flag = false;
                } else {
                    $('#error-email').html('');
                    $('#txtEmail').removeClass('input-error');
                }
            }
            if ($('#txtConfirm').val()=="") {
                $('#error-confirm').html('Please enter confirm password.');
                $('#txtConfirm').addClass('input-error');
                flag = false;
            } else if ($('#txtPassword').val() != $('#txtConfirm').val()) {
                $('#error-confirm').html('Password is not match');
                $('#txtConfirm').addClass('input-error');
                flag = false;
            } else {
                $('#error-confirm').html('');
                $('#txtConfirm').removeClass('input-error');
            }
            if ($('#txtDay').val() > 31 || $('#txtDay').val() < 1) {
                $('#txtDay').addClass('input-error');
                flag = false;
            }
            if ($('#txtYear').val() > 2050 || $('#txtYear').val() < 1900) {
                $('#txtYear').addClass('input-error');
                flag = false;
            }
            return flag;
        };
    </script>
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" runat="server">
    <div id="main">
        <div id="form">
            <div id="header">
                <p>
                    Create account</p>
                <asp:Button runat="server" ID="btnAccountManager" Text="Account manager" CssClass="btnNav btnNavTop"
                    PostBackUrl="~/UI/Administrator/AccountManagement.aspx" />
            </div>
            <div id="form-content">
                <div class="lblError">
                    <asp:Label runat="server" ID="lblMes"></asp:Label>
                </div>
                <div id="create-account" style="width: 853px; height: 545px; position: relative;
                                                                             top: 25px; left: 39px;">
                    <fieldset style="width: 50%; height: 540px; top: 0px; left: 0px; position: relative;">
                        <fieldset>
                            <legend><strong>Full name</strong></legend>
                            <input class="formatTextbox" id="txtFullname" name="txtFullname" type="text" placeholder="Enter full name ..." maxlength="50"/>
                            <span id="error-fullname" class="input-error-message"></span>
                        </fieldset>
                        <fieldset>
                            <legend><strong>User name</strong></legend>
                            <input class="formatTextbox" id="txtUsername" name="txtUsername" type="text" placeholder="Enter username ..." maxlength="32"/>
                            <span id="error-username" class="input-error-message"></span>
                        </fieldset>
                        <fieldset>
                            <legend><strong>Password</strong></legend>
                            <input class="formatTextbox" id="txtPassword" name="txtPassword" type="password" maxlength="32"/>
                            <span id="error-password" class="input-error-message"></span>
                        </fieldset>
                        <fieldset>
                            <legend><strong>Confirm password</strong></legend>
                            <input class="formatTextbox" id="txtConfirm" name="txtConfirm" type="password" maxlength="32"/>
                            <span id="error-confirm" class="input-error-message"></span>
                        </fieldset>
                        <fieldset id="select-date">
                            <legend><strong>Date of birth</strong></legend>
                            <input class="formatTextbox" id="txtDay" name="txtDay" type="text" maxlength="2"
                                   placeholder="Day" style="width: 70px;" />
                            <select id="BirthMonth" runat="server" name="BirthMonth" style="width: 133px; margin: -3px 0 0 0;
                                                                                                                                                                                                                                                                                                                                        position: relative; top: -3px; left: 10px;">
                                <option value="01">January</option>
                                <option value="02">February</option>
                                <option value="03">March</option>
                                <option value="04">April</option>
                                <option value="05">May</option>
                                <option value="06">June</option>
                                <option value="07">July</option>
                                <option value="08">August</option>
                                <option value="09">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                            <input class="formatTextbox" id="txtYear" name="txtYear" type="text" maxlength="4"
                                   placeholder="Year" style="width: 118px; position: relative; left: 19px; top: 0px;" />
                        </fieldset>
                        <fieldset>
                            <legend><strong>Gender</strong></legend>
                            <select class="formatTextbox" id="slGender" name="slGender" runat="server" style="position: relative;top: 0px; left: -10px;">
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </fieldset>
                        <fieldset>
                            <legend><strong>Address</strong></legend>
                            <input class="formatTextbox" id="txtAddress" name="txtAddress" type="text" placeholder="Enter your address ..." maxlength="100"/>
                            <span id="error-address" class="input-error-message"></span>
                        </fieldset>
                    </fieldset>
                    <fieldset style="width: 50%; height: 540px; position: absolute; float: right; top: 0px; left: 427px;">
                        <fieldset>
                            <legend><strong>Telephone</strong></legend>
                            <input class="formatTextbox" id="txtTelephone" name="txtTelephone"
                                   type="text" placeholder="Enter your phone number ..." maxlength="20"/>
                        </fieldset>
                        <fieldset>
                            <legend><strong>Email</strong></legend>
                            <input class="formatTextbox" id="txtEmail" name="txtEmail" type="text"
                                   placeholder="Enter your email ..." maxlength="40"/>
                            <span id="error-email" class="input-error-message"></span>
                        </fieldset>
                        <fieldset>
                            <legend><strong>Image</strong></legend>
                            <asp:FileUpload runat="server" ID="fuImage" Style="position: relative; top: -3px;margin-top: 5px;height: 30px;width: 350px;" />
                        </fieldset>
                        <fieldset>
                            <legend><strong>Role</strong></legend>
                            <select id="slRole" name="slRole" runat="server" style="position: relative; top: -3px;margin-top: 5px;height: 30px;width: 350px;">
                                <option value="Admin">Admin</option>
                                <option value="Staff">Staff</option>
                                <option value="Customer">Customer</option>
                            </select>
                        </fieldset>
                        <fieldset>
                            <strong>Qualification</strong>
                            <input class="formatTextbox" id="txtQualification" name="txtQualification" type="text"
                                   placeholder="Enter your qualification ..." maxlength="50" />
                            <span id="error-qualification" class="input-error-message"></span>
                        </fieldset>
                        <br />
                        <asp:Button runat="server" ID="btnCreate" Text="Create" CssClass="btnNav" 
                            onclick="btnCreate_Click" OnClientClick="return checkAll();"/>
                        
                    </fieldset>
                    
                        
                </div>
            </div>
        </div>
    </div>
</asp:Content>
